<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>User Pic 用户头像 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
    <div class="col-xl-6">

        <!--begin::Card-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        头像
                    </h3>
                </div>
            </div>
            <div class="card-body">
                <div class="e-section">

                    <!--begin::Section-->
                    <div class="e-section-info">基础</div>
                    <div class="e-section-content d-flex flex-wrap e-section-content--solid">
                        <span class="e-user-pic e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-1.jpg" alt="image">
                        </span>
                        <span class="e-user-pic e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-2.jpg" alt="image">
                        </span>
                        <span class="e-user-pic e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-3.jpg" alt="image">
                        </span>
                        <span class="e-user-pic e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-4.jpg" alt="image">
                        </span>
                        <span class="e-user-pic e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-5.jpg" alt="image">
                        </span>
                        <span class="e-user-pic e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-6.jpg" alt="image">
                        </span>
                        <span class="e-user-pic e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-7.jpg" alt="image">
                        </span>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section-info">用文字作为头像</div>
                    <div class="e-section-content d-flex flex-wrap e-section-content--solid">
                        <span class="e-user-pic e-user-pic-danger e-margin-r-5 e-margin-t-5">
                            <span>常在</span>
                        </span>
                        <span class="e-user-pic e-user-pic-info e-margin-r-5 e-margin-t-5">
                            <span>河边</span>
                        </span>
                        <span class="e-user-pic e-user-pic-success e-margin-r-5 e-margin-t-5">
                            <span>走</span>
                        </span>
                        <span class="e-user-pic e-user-pic-warning e-margin-r-5 e-margin-t-5">
                            <span>哪有</span>
                        </span>
                        <span class="e-user-pic e-user-pic-danger e-margin-r-5 e-margin-t-5">
                            <span>不</span>
                        </span>
                        <span class="e-user-pic e-user-pic-brand e-margin-r-5 e-margin-t-5">
                            <span>湿鞋</span>
                        </span>
                        <span class="e-user-pic e-user-pic-brand e-margin-r-5 e-margin-t-5">
                            <span>。</span>
                        </span>
                    </div>

                    <!--end::Section-->
                    <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                    <!--begin::Section-->
                    <div class="e-section-info">你可以在<code>span.e-user-pic</code>上添加<code>.e-user-pic--circle</code>设置头像使用圆形</div>
                    <div class="e-section-content d-flex flex-wrap e-section-content--solid">
                        <span class="e-user-pic e-user-pic--circle e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-1.jpg" alt="image">
                        </span>
                        <span class="e-user-pic e-user-pic--circle e-user-pic-danger e-margin-r-5 e-margin-t-5">
                            <span>不</span>
                        </span>
                        <span class="e-user-pic e-user-pic--circle e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-2.jpg" alt="image">
                        </span>
                        <span class="e-user-pic e-user-pic--circle e-user-pic-warning e-margin-r-5 e-margin-t-5">
                            <span>湿</span>
                        </span>
                        <span class="e-user-pic e-user-pic--circle e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-3.jpg" alt="image">
                        </span>
                        <span class="e-user-pic e-user-pic--circle e-user-pic-success e-margin-r-5 e-margin-t-5">
                            <span>鞋</span>
                        </span>
                        <span class="e-user-pic e-user-pic--circle e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-4.jpg" alt="image">
                        </span>
                    </div>
                    <!--end::Section-->
                </div>
            </div>
        </div>

        <!--end::Card-->
    </div>
    <div class="col-xl-6">
        <!--begin::Card-->
        <div class="card">
            <div class="card-head">
                <div class="card-head-label">
                    <h3 class="card-head-title">
                        高级
                    </h3>
                </div>
            </div>
            <div class="card-body">
                <!--end::Section-->
                <div class="e-section-info">你可以在<code>.e-user-pic</code>上添加<code>[data-toggle="e-tooltip"]</code>和<code>[title="这里是文字提示"]</code>设置文字提示</div>
                <div class="e-section-content d-flex flex-wrap e-section-content--solid">
                    <a href="#" class="e-user-pic e-margin-r-5 e-margin-t-5" data-toggle="e-tooltip"
                       data-placement="right" title="这里是文字提示">
                        <img src="/assets/media/portrait/200*200-1.jpg" alt="image">
                    </a>
                    <a href="#" class="e-user-pic e-user-pic--circle e-margin-r-5 e-margin-t-5"
                       data-toggle="e-tooltip" data-placement="right" title="这里是文字提示"
                       data-original-title="Tooltip title">
                        <img src="/assets/media/portrait/200*200-2.jpg" alt="image">
                    </a>
                    <a href="#" class="e-user-pic e-margin-r-5 e-margin-t-5" data-toggle="e-tooltip"
                       data-placement="right" title="这里是文字提示" data-original-title="Tooltip title">
                        <img src="/assets/media/portrait/200*200-3.jpg" alt="image">
                    </a>
                    <a href="#" class="e-user-pic e-user-pic--circle e-margin-r-5 e-margin-t-5"
                       data-toggle="e-tooltip" data-placement="right" title="这里是文字提示"
                       data-original-title="Tooltip title">
                        <img src="/assets/media/portrait/200*200-4.jpg" alt="image">
                    </a>
                    <a href="#" class="e-user-pic e-margin-r-5 e-margin-t-5" data-toggle="e-tooltip"
                       data-placement="right" title="这里是文字提示" data-original-title="Tooltip title">
                        <img src="/assets/media/portrait/200*200-5.jpg" alt="image">
                    </a>
                    <a href="#" class="e-user-pic e-user-pic--circle e-margin-r-5 e-margin-t-5"
                       data-toggle="e-tooltip" data-placement="right" title="这里是文字提示"
                       data-original-title="Tooltip title">
                        <img src="/assets/media/portrait/200*200-6.jpg" alt="image">
                    </a>
                    <a href="#" class="e-user-pic e-margin-t-5" data-toggle="e-tooltip" data-placement="right"
                       title="这里是文字提示" data-original-title="Tooltip title">
                        <img src="/assets/media/portrait/200*200-7.jpg" alt="image">
                    </a>
                </div>
                <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                <!--begin::Section-->
                <div class="e-section-info">你可以使用背景图作为头像</div>
                <div class="e-section-content d-flex flex-wrap e-section-content--solid">
                    <a href="#" class="e-user-pic e-margin-r-5 e-margin-t-5"
                       style="min-height: 50px;width: 50px;  background-image: url(/assets/media/portrait/200*200-1.jpg)"></a>
                    <a href="#" class="e-user-pic e-user-pic--circle e-margin-r-5 e-margin-t-5"
                       style="min-height: 50px;width: 50px;  background-image: url(/assets/media/portrait/200*200-2.jpg)"></a>
                    <a href="#" class="e-user-pic e-margin-r-5 e-margin-t-5"
                       style="min-height: 50px;width: 50px; background-image: url(/assets/media/portrait/200*200-3.jpg)"></a>
                    <a href="#" class="e-user-pic e-user-pic--circle e-margin-r-5 e-margin-t-5"
                       style="min-height: 50px;width: 50px; background-image: url(/assets/media/portrait/200*200-4.jpg)"></a>
                    <a href="#" class="e-user-pic e-margin-r-5 e-margin-t-5"
                       style="min-height: 50px;width: 50px; background-image: url(/assets/media/portrait/200*200-5.jpg)"> </a>
                    <a href="#" class="e-user-pic e-user-pic--circle e-margin-r-5 e-margin-t-5"
                       style="min-height: 50px;width: 50px;  background-image: url(/assets/media/portrait/200*200-6.jpg)"></a>
                    <a href="#" class="e-user-pic e-margin-t-5"
                       style="min-height: 50px;width: 50px; background-image: url(/assets/media/portrait/200*200-7.jpg)"></a>
                </div>

                <!--end::Section-->
                <div class="e-separator e-separator--space-lg e-separator--border-dashed"></div>

                <!--begin::Section-->
                <div class="e-section-info">
                    你可以在<code>.e-user-pic</code>上添加<code>.e-user-pic--sm</code>、<code>.e-user-pic--lg</code>、<code>.e-user-pic--xl</code>设置不同的尺寸
                </div>
                <div class="e-section-content d-flex flex-wrap e-section-content--solid">
                        <span class="e-user-pic e-user-pic--sm e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-1.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic--sm e-user-pic-success e-user-pic--circle e-margin-r-5 e-margin-t-5">
                            <span>A</span>
                        </span>
                    <span class="e-user-pic e-user-pic--sm e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-2.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic--sm e-user-pic--circle e-user-pic-danger e-margin-r-5 e-margin-t-5">
                            <span>B</span>
                        </span>
                    <span class="e-user-pic e-user-pic--sm e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-3.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic--sm e-user-pic--circle e-user-pic-warning e-margin-r-5 e-margin-t-5">
                            <span>C</span>
                        </span>
                    <span class="e-user-pic e-user-pic--sm e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-4.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic--sm e-user-pic--circle e-user-pic-brand e-margin-r-5 e-margin-t-5">
                            <span>D</span>
                        </span>
                    <span class="e-user-pic e-user-pic--sm  e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-5.jpg" alt="image">
                        </span>
                </div>

                <!--end::Section-->

                <!--begin::Section-->
                <div class="e-section-content d-flex flex-wrap e-margin-t-30 e-section-content--solid">
                        <span class="e-user-pic e-user-pic-brand e-margin-r-5 e-margin-t-5">
                            <span>J</span>
                        </span>
                    <span class="e-user-pic e-user-pic--circle e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-1.jpg" alt="image">
                        </span>
                    <span class="e-user-pic  e-user-pic-danger e-margin-r-5 e-margin-t-5">
                            <span>A</span>
                        </span>
                    <span class="e-user-pic e-user-pic--circle  e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-2.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic-warning e-margin-r-5 e-margin-t-5">
                            <span>V</span>
                        </span>
                    <span class="e-user-pic e-user-pic--circle e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-3.jpg" alt="image">
                        </span>
                    <span class="e-user-pic  e-user-pic-success e-margin-r-5 e-margin-t-5">
                            <span>A</span>
                        </span>
                    <span class="e-user-pic e-user-pic--circle e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-4.jpg" alt="image">
                        </span>
                </div>
                <!--end::Section-->

                <!--begin::Section-->
                <div class="e-section-content d-flex flex-wrap e-margin-t-30 e-section-content--solid">
                        <span class="e-user-pic e-user-pic--lg e-user-pic-brand e-margin-r-5 e-margin-t-5">
                            <span>J</span>
                        </span>
                    <span class="e-user-pic e-user-pic--lg e-user-pic--circle e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-1.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic--lg  e-user-pic-danger e-margin-r-5 e-margin-t-5">
                            <span>A</span>
                        </span>
                    <span class="e-user-pic e-user-pic--lg e-user-pic--circle  e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-2.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic--lg e-user-pic-warning e-margin-r-5 e-margin-t-5">
                            <span>V</span>
                        </span>
                    <span class="e-user-pic e-user-pic--lg e-user-pic--circle e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-3.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic--lg  e-user-pic-success e-margin-r-5 e-margin-t-5">
                            <span>A</span>
                        </span>
                    <span class="e-user-pic e-user-pic--lg e-user-pic--circle e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-4.jpg" alt="image">
                        </span>
                </div>
                <!--end::Section-->

                <!--begin::Section-->
                <div class="e-section-content d-flex flex-wrap e-margin-t-30 e-section-content--solid">
                        <span class="e-user-pic e-user-pic--xl e-user-pic--circle e-user-pic-danger e-margin-r-5 e-margin-t-5">
                            <span>Java</span>
                        </span>
                    <span class="e-user-pic e-user-pic--xl  e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-1.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic--xl e-user-pic--circle e-user-pic-warning e-margin-r-5 e-margin-t-5">
                            <span>it's</span>
                        </span>
                    <span class="e-user-pic e-user-pic--xl e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-2.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic--xl e-user-pic--circle e-user-pic-brand e-margin-r-5 e-margin-t-5">
                            <span>the</span>
                        </span>
                    <span class="e-user-pic e-user-pic--xl e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-3.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic--xl e-user-pic--circle e-user-pic-success e-margin-r-5 e-margin-t-5">
                            <span>best</span>
                        </span>
                    <span class="e-user-pic e-user-pic--xl e-margin-r-5 e-margin-t-5">
                            <img src="/assets/media/portrait/200*200-4.jpg" alt="image">
                        </span>
                    <span class="e-user-pic e-user-pic--xl e-user-pic--circle e-user-pic-info e-margin-r-5 e-margin-t-5">
                            <span>语言</span>
                        </span>
                </div>
            </div>
        </div>
        <!--end::Card-->
    </div>
</div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>